<template>
	<view class="full-screen-box">
		<swiper class="swiper" :current="currentIndex" @change="handleSwiperChange">
			<swiper-item v-for="(item, index) in localFileList" :key="index">
				<view class="swiper-item">
					<image :src="item.url" class="full-img" mode="aspectFill"></image>
					<view style="position: absolute;top: 0.8rem;left: 0.5rem;">
						<image src="/static/icon/left.png" class="left-icon" @click="closePreview"></image>
					</view>
					<!-- 右侧图标 -->
					<view class="icon-container" >
						<view class="right-icon">
							<image src="/static/icon/like1.png" class="icon-style"></image>
							<view class="icon-text">0</view>
						</view>
						<view class="right-icon">
							<image src="/static/icon/star.png" class="icon-style"></image>
							<view class="icon-text">0</view>
						</view>
						<view class="right-icon">
							<image src="/static/icon/share.png" class="icon-style"></image>
							<view class="icon-text">0</view>
						</view>
						<view class="right-icon">
							<image src="/static/icon/message.png" class="icon-style"></image>
							<view class="icon-text">0</view>
						</view>
					</view>
					<!-- 下方内容 -->
					<view class="bottom-container">
						<view class="bottom-text">{{localTitle}}</view>
						<view class="bottom-name">baby 3</view>
						<view>
							<image src="/static/icon/add.png" class="icon-style2"></image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
	import { ref,defineProps,defineEmits } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { Product,upLoadImg} from '@/types/types'

	const props = defineProps<{
		title:string,
		desc:string,
		fileList:Array<upLoadImg>
	}>()
	const emits = defineEmits()
	
	const localTitle = ref(props.title)
	const localDesc = ref(props.desc)
	const localFileList = ref(props.fileList)
	// 当前展示的商品索引
	const currentIndex = ref(0);
	// 处理滑动切换
	const handleSwiperChange = (e : any) => {
		currentIndex.value = e.detail.current;
	};

	// 处理图片点击 - 返回home页
	const closePreview = () => {
		emits('closePreview')
		// uni.reLaunch({
		// 	url: '/pages/create/create'
		// });
	}
</script>

<style lang="scss" scoped>
	.full-screen-box {
		height: 100vh;
		background-color: #000;
	}
	.left-icon {
		width: 1.5rem;
		height: 1.5rem;
	}
	.swiper {
		width: 100%;
		height: 100vh;
	}

	.swiper-item {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.full-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.icon-container {
		position: absolute;
		top: 20rem;
		right: 0.6rem;
		z-index: 20;
	}

	.right-icon {
		margin-bottom: 1rem;
	}

	.icon-style {
		width: 2.25rem;
		height: 2.25rem;
	}

	.icon-text {
		margin-top: 0.2rem;
		color: rgba(255, 255, 255, 0.8);
		font-size: 0.63rem;
		text-align: center;
	}

	.bottom-container {
		position: absolute;
		bottom: 0.3rem;
		left: 0.7rem;
		z-index: 20;
		display: flex;
	}

	.bottom-text {
		width: 10.56rem;
		height: 2.19rem;
		line-height: 1.09rem;
		color: rgba(255, 255, 255, 1);
		font-size: 0.75rem;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.bottom-name {
		width: 6.5rem;
		height: 2.19rem;
		line-height: 2.19rem;
		border-radius: 0.25rem;
		color: rgba(255, 255, 255, 1);
		font-size: 1.06rem;
		text-align: right;
		font-weight: 600;
		margin-left: 2.6rem;
	}

	.icon-style2 {
		width: 1.56rem;
		height: 1.94rem;
		margin: 0.2rem 0 0 0.4rem;
	}
</style>